<!DOCTYPE html>
<meta charset="utf-8">
<title>Hidden attribute hides element</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<body>
  <div id="hiddenEl" hidden>Foo</div>
  <div id="styledEl" hidden style="display: inline-block;">Bar</div>
</body>

<script>
"use strict";

test(() => {
  const element = document.querySelector("#hiddenEl");
  assert_equals(getComputedStyle(element).display, "none");
}, "Hidden element has display: none");

test(() => {
  const element = document.querySelector("#styledEl");
  assert_equals(getComputedStyle(element).display, "inline-block");
}, "Display can be overwritten by stylesheets");
</script>
